<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <!-- <el-form-item style="float:right;">
          <el-button type="primary" class="button_style" size="small" icon="upload2" @click="exportExcels">导出</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="primary" class="button_style" size="small" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item> -->
        <el-form-item style="float:right;">
          <!-- <el-button type="primary" class="button_style" size="small" icon="search" v-on:click="getcustoms(true)" v-show="agentConfigQuery">创建审批流</el-button> -->
          <el-button type="primary" v-show="addApproveFlow" class="button_style" size="small" icon="plus" v-on:click="createNew()">创建审批流</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="approveData" stripe border :height="this.winHeight-195" highlight-current-row style="width: 100%;">
      <el-table-column prop="cName" align="center" label="审批名称" min-width="80"show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="flowNo" align="center" label="审批编号" min-width="120"show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="branchCode" align="center" label="机构" min-width="80" :formatter="formatBranch">
      </el-table-column>
      <el-table-column prop="startTime" align="center" label="开始日期" min-width="100"show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="endTime" align="center" label="结束日期" min-width="100"show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed='right' width="150">
        <template scope="scope">
          <el-col :xs="12" :sm="12" :md="12" :lg="12">
            <el-button size="small" v-show="flowConfig" @click="handleAdd(scope.$index, scope.row)">配置</el-button>
          </el-col>
          <!-- <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-button type="warning" size="small" v-show="channelUpdate" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            </el-col> -->
          <!-- <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <el-button type="danger" size="small" v-show="IsExamines(scope.$index, scope.row)" @click="handleExamine(scope.$index, scope.row)">审批</el-button>
              </el-col> -->
          <!--工具条-->

        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->

      <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 40, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-col>

    <!--创建审批流界面-->
    <el-dialog title="新增"  v-model="createNewVisible" :close-on-click-modal="false">
      <el-row>
        <el-tree :data="createTreedata" :props="defaultProps" node-key="id" check-strictly default-expand-all :expand-on-click-node="false" ref='createTreedata' :render-content="renderContent">
        </el-tree>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="createNewVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addCreateNewBtn" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--详情界面-->
    <el-dialog title="节点详情"  v-model="nodeDetailVisible" :close-on-click-modal="false">
      <el-form label-width="120px" :model="nodeDetailData" ref="nodeDetailData">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="审批流编号:">
              <el-input v-model="nodeDetailData.flowNo" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="节点名称:">
              <el-input v-model="nodeDetailData.flowName" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="节点编号:">
              <el-input v-model="nodeDetailData.flowNode" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="父节点编号:">
              <el-input v-model="nodeDetailData.parentNode" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="用户:">
              <el-input v-model="nodeDetailData.userCode" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="角色:">
              <el-input v-model="nodeDetailData.roleCode" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="创建时间:">
              <el-input v-model="nodeDetailData.createTime" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="更新时间:">
              <el-input v-model="nodeDetailData.updateTIime" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="nodeDetailVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--添加下级节点界面-->
    <el-dialog :title="titles" v-model="addFormVisible"  :close-on-click-modal="false">
      <el-form label-width="120px" :model="addChild" ref="addChild">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="审批流编号:">
              <el-input v-model="addChild.flowNo" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="父节点:">
              <el-input v-model="addChild.parentNode" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="节点名称:">
              <el-input v-model="addChild.flowName" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="用户:">
              <el-select v-model="addChild.userCode" style="width:100%;" multiple filterable remote reserve-keyword placeholder="请输入用户名" :remote-method="querySearchAsync" :loading="optionsloading" @change='userSelect(addChild.userCode)' :disabled='userSelectStatus'>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="角色:">
              <el-select clearable multiple style="width:100%;" v-model="addChild.roleCode" placeholder="请选择角色" readonly @change='roleSelect(addChild.roleCode)' :disabled='roleSelectStatus'>
                <el-option v-for="(role,index) in roles" :key="index" :label="role.label" :value="role.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row> -->
          <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="是否有修改权限:">
              <el-select v-model="addChild.updateFlag" style="width:100%;" placeholder="请选择">
                <el-option label="无" value="0"></el-option>
                <el-option label="有" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
         
        <!-- </el-row> -->
        <!-- <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="脚本:">
              <el-input v-model="addChild.flowCondition" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="注释:">
              <span style="color:#ff4949;">用户和角色只能填一种</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addChildBtn" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>


    <!--创建审批流界面-->
    <el-dialog title="新增审批流" v-model="addApproveVisible" :close-on-click-modal="false">
      <el-form label-width="120px" :model="addApprove" ref="addApprove">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="审批中文名称:">
              <el-input v-model="addApprove.cName" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="审批英文名称:">
              <el-input v-model="addApprove.eName" style="width:100%;" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="机构:">
              <el-select clearable v-model="addApprove.branchCode" placeholder="请选择选择机构">
                <el-option v-for="(item,index) in items" :key="index" :label="item.codeCname" :value="item.code"></el-option>
                <el-option label="总公司" value="0000"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="18" :md="12" :lg="12">
            <el-form-item label="类型:">
              <el-select clearable v-model="addApprove.flowType" placeholder="请选择类型">
                <el-option label="产品" value='1'></el-option>
                <el-option label="文章" value="2"></el-option>
                <el-option label="海报" value="3"></el-option>
                <el-option label="佣金" value="4"></el-option>
                <el-option label="手工发放" value="5"></el-option>
                <el-option label="活动" value="6"></el-option>
                <!-- <el-option label="积分管理审批" value="4"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :xs="24" :sm="18" :md="12" :lg="12">
            <el-form-item label="起止日期:">
              <el-date-picker type="daterange" style="width:100%;" placeholder="请选择起止日期" v-model="addApprove.time" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addApproveVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addApproveBtn" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import util from '../../common/js/util'

import commons from '../../common/js/common'
//import NProgress from 'nprogress'
import { mapState, mapActions } from 'vuex'
import { addFlow, flowList, flowChildNodeList, addChildNode, roleList, nodeDetail, adminList,removeNode } from '../../api/api';
import editor from '../../components/Quilleditor.vue'
let id = 1000;
export default {
  components: {
    editor
  },
  data() {
    return {
      roles: [],
      content: '',
      filters: {
        clauseTitle: '',
        name: '',
        role: ''
      },
      exportTotal: 0,
      loading: '',
      examineindex: '',
      clauses: [],
      lists: [],
      total: 0,
      page: 1,
      pageSize: 10,
      addApproveFlow:false,
      flowConfig:false,
      listLoading: false,
      editorLoading: false,
      optionsloading: false,
      editorVisible: false,
      editLoading: false,
      addLoading: false,
      IsShow: false,
      addFormVisible: false,
      agentConfigQuery: false,
      appendStore: '',
      appendData: '',
      createNewVisible: false,
      addApproveVisible: false,
      nodeDetailVisible: false,
      userSelectStatus:false,
      roleSelectStatus:false,
      editFormVisible:false,
      approveData: [],
      treedata: [],
      childTreedata: [],
      restaurants: [],
      options: [],
      items: [],
      nodeDetailData: {},
      titles:'',
      addApprove: {
        cName: '',
        eName: '',
        branchCode: '',
        time: '',
        startTime: '',
        endTime: '',
        id: '',
        flowNo: '',// 流程编号
        flowType: '',// 流程分类
        status: '',
        createTime: '',
        updateTIime: '',
      },
      addChild: {
        id: '',//0
        flowNode: '',// 节点编号0
        flowNo: '',
        flowName: '',
        createTime: '',//0
        updateTIime: '',//0
        userCode: [],
        roleCode: [],
        updateFlag: '',
        parentNode: '',// 父节点
        flowCondition: '',// 条件转出脚本
      },
      editChild:{
        id: '',//0
        flowNode: '',// 节点编号0
        flowNo: '',
        flowName: '',
        createTime: '',//0
        updateTIime: '',//0
        userCode: [],
        roleCode: [],
        updateFlag: '',
        parentNode: '',// 父节点
        flowCondition: '',
      },
      createTreedata: [],
      flowNo: '',
      flowName: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: mapState({
    clist: 'riskCodelist',
    blist: 'branchCodelist',
    winHeight: 'winHeight',
    hotAreaList: 'hotAreaList',
    winWidth: 'winWidth',
  }),
  methods: {
    formatRole: function (roleCode) {
      let arr = roleCode.split("&");
      let newArr = [];
      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < this.roles.length; j++) {
          if (arr[i] == this.roles[j].id) {
            newArr.push(this.roles[j].label);
          }
        }
      }
      return newArr.join("&");
    },
    formatBranch: function (row, column) {
      return commons.Branchs(row.branchCode);
    },
// 添加下级节点
    append(store, data) {
      this.titles = '添加';
      this.addChild = {
         id: '',//0
        flowNode: '',// 节点编号0
        flowNo: '',
        flowName: '',
        createTime: '',//0
        updateTIime: '',//0
        userCode: [],
        roleCode: [],
        updateFlag: '',
        parentNode: '',// 父节点
        flowCondition: '',// 条件
      };
      this.addFormVisible = true;
      this.addChild.flowNo = this.flowNo;
      this.addChild.parentNode = data.id;
      // this.getRole();
    },
    querySearchAsync(query) {
      this.restaurants = [];
      if (!commons.isEmpty(query)) {
        let para = new FormData();
        para.append("pageSize", 10);
        para.append("pageNumber", 1);
        para.append("username", 'flowNode');
        para.append("roleid", '');
        para.append("userid", query);
        adminList(para).then((res) => {
          if (res.data.success) {
            for (var i in res.data.result.content) {
              let avalue = res.data.result.content[i].userid;
              this.restaurants.push({
                value: avalue,
                label: avalue
              });
            }
            this.optionsloading = true;
            setTimeout(() => {
              this.optionsloading = false;
              this.options = this.restaurants.filter(item => {
                return item.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
              });
            }, 0);
          }
        }).catch(() => {

        });
      } else {
        this.options = [];
      }
    },

// 添加子节点提交
    addChildBtn: function () {
      if(this.addChild.roleCode.length<1&&this.addChild.userCode.length<1){
        this.$message({
            message: '角色和用户名不能同时为空！',
            type: 'error'
          }); 
      }else{
      console.log(this.addChild.userCode);
      if(this.addChild.roleCode.length>1){

        this.addChild.roleCode = this.addChild.roleCode.join('&');
      }else{
        this.addChild.roleCode = this.addChild.roleCode.toString();
      }
      if(this.addChild.userCode.length>1){
        this.addChild.userCode = this.addChild.userCode.join('&');
      }else{
        this.addChild.userCode = this.addChild.userCode.toString();
      }
      addChildNode(this.addChild).then((res) => {
        
        this.editLoading = false;
        if (res.data.success) {
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.createNewVisible = false;
          this.addFormVisible = false;
          this.getFlowList(true);
        }
        else {
          this.$message({
            message: res.data.result,
            type: 'error'
          });
        }
      }).catch(() => {
        this.editLoading = false;
      });

    }},
    getRole: function () {
      let role = new FormData();
      role.append("pageSize", 100);
      role.append("pageNumber", this.page);
      role.append('type','flowNode');
      roleList(role).then((res) => {
        var data = res.data.result.content;
        if (this.roles == "") {
          for (var i in data) {
            this.roles.push({
              id: data[i].roleid,
              label: data[i].rolename
            });
          }
        }
      });
    },
    // 详情
    nodeDetail(store, data) {
      this.nodeDetailVisible = true;
      let para = new FormData();
      para.append('flowNo', this.flowNo);
      para.append('flowNode', data.id);
      nodeDetail(para).then((res) => {
        this.nodeDetailData = res.data.result;
        if (this.nodeDetailData.roleCode) {
          this.nodeDetailData.roleCode = this.formatRole(this.nodeDetailData.roleCode);
        }
      })
    },
    // 修改节点
    nodeEdit(store,data){
      this.titles = '修改';
      this.addFormVisible = true;
      let para = new FormData();
      para.append('flowNo', this.flowNo);
      para.append('flowNode', data.id);
      nodeDetail(para).then((res) => {
        this.addChild = res.data.result;
        console.log(this.addChild)
        if (this.addChild.roleCode) {
          this.addChild.roleCode = res.data.result.roleCode.split('&');
          for(var i in this.addChild.roleCode){
            this.addChild.roleCode[i] = parseInt(this.addChild.roleCode[i]);
          }
        }else{
          this.addChild.roleCode = [];
        }
        if (this.addChild.userCode) {
          this.addChild.userCode = res.data.result.userCode.split('&');
        }
      })
    },
    // 修改节点
    nodeRemove(store,data){
      this.titles = '删除';
      // this.addFormVisible = true;
      this.$confirm('确认删除吗？', '提示', {}).then(() => {
        let para = new FormData();
        para.append('flowNo', this.flowNo);
        para.append('flowNode', data.id);

        removeNode(para).then((res) => {
          console.log(res);
          if (res.data.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.createNewVisible = false;
            this.getFlowList(true);

          }
          else {
            this.$message({
              message: res.data.result,
              type: 'error'
            });
          }
        })
      });
    },
    renderContent(h, { node, data, store }) {
      if(node.label =='初始节点' &&!commons.isEmpty(data.children) ){
          return (
        <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
            <el-button size="mini" type="success" on-click={() => this.nodeDetail(store, data)} >节点详情</el-button>
          </span>
        </span>);
        }
     else if(!commons.isEmpty(data.children)){
         return (
        <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
          <el-button size="mini" type="danger" on-click={() => this.nodeRemove(store, data)} >删除节点</el-button>
          <el-button size="mini" type="warning" on-click={() => this.nodeEdit(store, data)} >修改节点</el-button>
            <el-button size="mini" type="success" on-click={() => this.nodeDetail(store, data)} >节点详情</el-button>
          </span>
        </span>);
      }else{
      return (
        <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
            <el-button size="mini" type="danger" on-click={() => this.nodeRemove(store, data)} >删除节点</el-button>
            <el-button size="mini" type="primary" on-click={() => this.append(store, data)}>添加下级</el-button>
            <el-button size="mini" type="warning" on-click={() => this.nodeEdit(store, data)} >修改节点</el-button>
            <el-button size="mini" type="success" on-click={() => this.nodeDetail(store, data)} >节点详情</el-button>

          </span>
        </span>);
         }
    },
    // 创建审批流
    createNew: function () {
      this.addApproveVisible = true;
    },
    // 创建审批流提交
    addApproveBtn: function () {
      this.addApprove.startTime = commons.changeTimes(this.addApprove.time, 'start');
      this.addApprove.endTime = commons.changeTimes(this.addApprove.time, 'end');
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        addFlow(this.addApprove).then((res) => {
          this.editLoading = false;
          if (res.data.success) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.addApproveVisible = false;
            this.getFlowList(true);
          }
          else {
            this.$message({
              message: res.data.result,
              type: 'error'
            });
          }
        }).catch(() => {
          this.editLoading = false;
        });
      });
    },

    // 添加审批节点提交
    addCreateNewBtn: function () {
    },
    roleSelect(val){
      if(!commons.isEmpty(val)){
        this.userSelectStatus = true;
      }else{
        this.userSelectStatus = false;
      }
    },
    userSelect(val){
      if(!commons.isEmpty(val)){
        this.roleSelectStatus = true;
      }else{
        this.roleSelectStatus = false;
      }
    },

    // 添加审批节点
    handleAdd: function (index, row) {
      this.createTreedata = [];
      this.createNewVisible = true;
      // var GetByID = function (Data, ID) {
      //           for (let i = 0; i < Data.length; i++) {
      //               let T = Data[i];
      //               if (ID == T.id) {
      //                   return T;
      //               }
      //               if (T.children) {
      //                   let Deep = GetByID(T.children, ID)
      //                   if (Deep) {
      //                       return Deep;
      //                   }
      //               }
      //           }
      //       };
      this.flowNo = row.flowNo;
      let role = this.roles;
      this.flowName = row.flowName;
      let para = new FormData();
      para.append('flowNo', row.flowNo);
      flowChildNodeList(para).then((res) => {
        var data = res.data.result;
        gettree(data, this.createTreedata);
      });

      function formartLabel(roleCode, username) {
        console.log("==============================");
        console.log(username);
        if (roleCode) {
          let arr = roleCode.split("&");
          let newArr = [];
          for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < role.length; j++) {
              if (arr[i] == role[j].id) {
                newArr.push(role[j].label);
              }
            }
          }
          return "角色：" + newArr.join("&");
        } else {
          if (username == "初始节点") {
            return username;
          } else {
            if (username) {
              return "用户：" + username;
            }
          }
        }
      };
      function gettree(arr, trees) {
        for (var i in arr) {
          let labelValue = formartLabel(arr[i].roleCode, arr[i].username);
          trees.push({
            id: arr[i].flowNode,
            // label: arr[i].roleCode,
            label: labelValue,
            children: []
          });
          if (arr[i].nextNodes) {
            gettree(arr[i].nextNodes, commons.GetByID(trees, arr[i].flowNode).children);
            // gettree(arr[i].nextNodes, trees[i].children);
          }
        }
      }
    },

    handleSelect() {

    },
    handleCurrentChange(val) {
      this.page = val;
      this.getFlowList(true);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getFlowList(true);
    },
    // 获取列表
    getFlowList: function (bool) {
      let para = new FormData();
      para.append("pageSize", bool ? this.pageSize : this.total);
      para.append("pageNumber", bool ? this.page : 1);
      flowList(para).then((res) => {
        this.total = res.data.result.totalElements;
        this.exportTotal = res.data.result.totalElements;
        this.approveData = res.data.result.content;
      })
    },
    btnShow: function () {
      let thisData = JSON.parse(sessionStorage.getItem('1502'));
      let _this = this;
      $.each(thisData, function (i, j) {
        if (thisData[i] == "addApproveFlow") {
          _this.addApproveFlow = true;
        }
        if (thisData[i] == "flowConfig") {
          _this.flowConfig = true;
        }
      });
    },
  },
  mounted() {
    this.btnShow();
    this.items = this.blist.result;
    this.getFlowList(true);
    this.getRole();
  }
}

</script>

<style scoped>
.kboder {
  border: 1px solid #bfcbd9;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: pointer;
}
.ksboder {
  margin: 10px;
  word-wrap: break-word;
}
.detailLabel {
  /*float:left;*/
  display: inline-block;
  text-align: right;
  width: 120px;
  color: #0b80da;
  font-weight: bold;
}
.detaillabel {
  margin-bottom: 10px;
}
/*.toolbar {
  padding:10px;
}*/
/*.toolbar .el-form-item{
  margin-bottom: 0px !important;
  margin-left: 10px;
}*/
</style>